<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Utopia - the utimate house agent for you choice</title>

<script type="text/javascript">
	function showValue(newValue) {
		document.getElementById("rangeValue").innerHTML = newValue;
	}

	function swichPrice(type) {
		if (type == "rentRG" && document.getElementById(type).style.visibility == "hidden") {
			document.getElementById(type).value = '500';
			showValue(document.getElementById(type).value);
			document.getElementById(type).style.visibility = 'visible';
			document.getElementById(type).style.width = 'auto';
			document.getElementById("buyRG").style.visibility = 'hidden';
			document.getElementById("buyRG").style.width = '0px';
			document.getElementById("buyRG").style.margin = '0px 0px 0px 0px';
			document.getElementById("rangeValue").style.visibility = 'visible';
		}
		if (type == "buyRG" && document.getElementById(type).style.visibility == "hidden") {
			document.getElementById(type).value = '200000';
			showValue(document.getElementById(type).value);
			document.getElementById(type).style.visibility = 'visible';
			document.getElementById(type).style.width = 'auto';
			document.getElementById("rentRG").style.visibility = 'hidden';
			document.getElementById("rentRG").style.width = '0px';
			document.getElementById("rentRG").style.margin = '0px 0px 0px 0px';
			document.getElementById("rangeValue").style.visibility = 'visible';
		}
	}
</script>

</head>
<body>
	<div class="logo"><img src="logo.png" /></div>
	<div class="search">
		<form action="gmap.jsp" method="post" target="_blank">
			<input type="text" name="bar" class="in" maxlength="100"
				style="width: 450px;"></input>
			<div>
				<input name="radio" type="radio" onclick="swichPrice('rentRG')">Renting
				<input name="radio" type="radio" onclick="swichPrice('buyRG')">Buying
			</div>
			<div>
				Building Type: <select name="bt">
					<option value="apt">Apartment</option>
					<option value="condo">Condo</option>
					<option value="house">House</option>
					<option value="townhs">Town House</option>
					<option value="homesy">Home Stay</option>
				</select> Price Range: 
				<input name="rentRG" id="rentRG" style="visibility:hidden" type="range" min="500" max="3000" value="0" step="50" onchange="showValue(this.value)" />
				<input name="buyRG" id="buyRG" style="visibility:hidden" type="range" min="200000" max="2000000" value="0" step="500" onchange="showValue(this.value)" />
				<span id="rangeValue" style="visibility:hidden">0</span>
			</div>

			<div>
				User Interest: <input name="inSchool" type="checkbox">School
				<input name="inShop" type="checkbox">Shopping Malls <input
					name="inGas" type="checkbox">Gas Station <input
					name="inRest" type="checkbox">Resturant <input name="inSub"
					type="checkbox">Subway
			</div>

			<input type="submit" value="Search!">
		</form>
	</div>
</body>
</html>